<template>
  <SubLayout @refresh="refresh" :breadcrumb="false" :showRefresh="true">
    <!-- 操作栏 -->
     <template #bread>
      <router-link to><span @click="router.go(-1)">应用列表</span></router-link>
      <el-icon class="route-icon"> <arrow-right /> </el-icon>
    </template>
    <template #left>
      <ApplicationSelect
        v-model="query.svcAppId"
        @refresh="queryChange"
      />
      <AuthStatusSelect
        v-model="query.permsSts"
        @refresh="queryChange"
      />
      <el-input 
        class="input"
        placeholder="搜索服务名称"
        v-model="query.svcName"
        @input="queryChange"
      />
      <el-button type="primary" @click="reset">重置</el-button>
    </template>
    <template #default>
      <!-- 列表 -->
      <DynamicTable
        ref="DynamicTable"
        v-loading="listLoading"
        class="table-container"
        :total="total"
        v-model:current="page.current"
        v-model:size="page.size"
        :data="list"
        :columns="tableColumns"
        @pagination="getList"
      />
      <!-- 流控 -->
      <FlowControlDrawer
        v-model="showEdit"
        :type="editType"
        :item="currentItem"
        @update-list="refresh"
      />
    </template>
  </SubLayout>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive } from "vue";
import { useListManage } from "@/hooks";
import { Search, ArrowRight } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  getAppSvcPageList, // 服务分页列表
  deleteAppSvc, // 删除订阅
  getFlowControlDetail
} from "@/api/application";

// 组建调用
import SubLayout from '@/components/SubLayout';
import Header from "@/components/Header.vue";
import FilterBar from "@/components/FilterBar.vue";
import DynamicTable from "@/components/DynamicTable";
import FlowControlDrawer from "./components/FlowControlDrawer.vue";
import ApplicationSelect from '@/components/ApplicationSelect';
import AuthStatusSelect from '@/components/AuthStatusSelect';
export default defineComponent({
  name: "MeansApplicationAuthorization",
  components: {
    FilterBar,
    Header,
    DynamicTable,
    ApplicationSelect,
    AuthStatusSelect,
    FlowControlDrawer,
    SubLayout,
    ArrowRight
  },
  setup(props, { emit, slots }) {
    const route = useRoute();
    const router = useRouter();
    const query = reactive({
      svcAppId: '', // 服务所属应用id
      appName: route.query.name,
      svcName: '',
      appId: route.params.id, // 当前应用id
      permsSts: ''
    });
    const DynamicTable = ref(null);
    let {
      page,
      list,
      total,
      editType,
      showEdit,
      refresh,
      listLoading,
      handleDelete,
      handleUpdate,
      getList,
      queryChange,
      currentItem,
      reset
    } = useListManage(props, emit, {
      getItems: getAppSvcPageList,
      query: query,
      deleteItem: deleteAppSvc,
      getDetail: getFlowControlDetail,
    });
    const handleCreate = async (row, index) => {
      editType.value = "create";
      currentItem.value = {
        svcId: row.svcId,
        appId: route.params.id
      };
      showEdit.value = true;
    };
    const tableColumns = ref([
      {
        label: "服务名称",
        key: "svcName",
        minWidth: '250'
      },
      {
        label: "所属应用",
        key: "svcAppName",
        minWidth: '200'
      },
      {
        label: "接口类型",
        key: "ifType",
        minWidth: '150'
      },
      {
        label: "说明",
        key: "memo",
        minWidth: '200'
      },
      {
        label: "上线状态",
        width: '100',
        render: (h, { row, index }) =>
          <span class={row.sts == 'A' ? 'online' : row.sts == 'D' ? 'outline' : 'test'}>
            {row.sts == 'A' ? '已上线' : row.sts == 'D' ? '未上线' : '草稿'}
          </span>
      },
      {
        label: "订阅状态",
        width: '100',
        render: (h, { row, index }) =>
          <div class="tab-status-tag">
            <b class={row.permsSts == 0 ? 'success' : 'todo'} />
            <span class={row.permsSts == 0 ? 'success' : 'todo'}>{row.permsSts == 0 ? '已订阅' : '未订阅'}</span>
          </div>
      },
      {
        label: "操作",
        fixed: "right",
        width: "150px",
        render: (h, params) => (
          <span>
            {params.row.permsSts == 0 ?
              <el-popconfirm
                title="确定要解除订阅吗？"
                confirmButtonText="好的"
                cancelButtonText="不用了"
                onConfirm={() => handleDelete(params.row)}
                v-slots={{
                  reference: () => (
                    <el-button type="text" size="small">
                      解除订阅
                    </el-button>
                  ),
                }}
              /> :
              (params.row.sts == 'A' ?
                <el-button type="text" size="small"
                  onClick={() => handleCreate(params.row, params.index)}
                >
                  订阅
                </el-button> :
                <span style="font-size: 12px;color:#c0c4cc">暂时无法订阅</span>

              )
            }

            {
              params.row.permsSts == 0 &&
              <el-button
                type="text"
                size="small"
                onClick={() => handleUpdate(params.row, params.index)}
              >
                流量控制
              </el-button>

            }
          </span>
        ),
      },
    ]);

    onMounted(() => {
      getList();
    });

    return {
      page,
      total,
      getList,
      route,
      Search,
      list,
      listLoading,
      editType,
      query,
      queryChange,
      tableColumns,
      refresh,
      DynamicTable,
      // 流控
      showEdit,
      router,
      currentItem,
      reset
    };
  },
});
</script>
<style lang="scss" scoped>
.el-select {
  margin-right: 10px;
}

:deep(.tab-status-tag) {
  b {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: 0.1em;

    &.error {
      background: rgba(255, 58, 58, 1);
    }

    &.todo {
      background: rgba(255, 139, 58, 1);
    }

    &.success {
      background: rgba(42, 207, 138, 1);
    }
  }

  span {
    &.error {
      color: rgba(255, 58, 58, 1);
    }

    &.todo {
      color: rgba(255, 139, 58, 1);
    }

    &.success {
      color: rgba(42, 207, 138, 1);
    }
  }
}

:deep(.online) {
  display: inline-block;
  width: 60px;
  height: 22px;
  line-height: 22px;
  border-radius: 22px;
  border: 1px solid rgba(42, 207, 138, 1);
  color: rgba(42, 207, 138, 1);
  text-align: center;
  font-size: 12px;
  // background: url(@/assets/application/online.png) 100% no-repeat;
  // background-size: 100% 100%;
}

:deep(.outline) {
  display: inline-block;
  width: 60px;
  height: 22px;
  line-height: 22px;
  border-radius: 22px;
  border: 1px solid rgba(255, 139, 58, 1);
  color: rgba(255, 139, 58, 1);
  text-align: center;
  font-size: 12px;
  // background: url(@/assets/application/outline.png) 100% no-repeat;
  // background-size: 100% 100%;
}

:deep(.test) {
  display: inline-block;
  width: 60px;
  height: 22px;
  line-height: 22px;
  border-radius: 22px;
  border: 1px solid #909399;
  color: #909399;
  text-align: center;
  font-size: 12px;
  // background: url(@/assets/application/outline.png) 100% no-repeat;
  // background-size: 100% 100%;
}
</style>